import React from 'react'
import './Registered.css'
import { ImagePicker } from 'antd-mobile';
import { Button,WingBlank, WhiteSpace } from 'antd-mobile';
import axios from 'axios'

class Registered extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            pwd: '', // 密码
            pwdConfirm: '', // 确认密码
            payPassword:'', //支付密码
            files: [],
            multiple: false,
            shop:{
                shop_name: '', //账号
                shop_phone:'',
                shop_address:'',
                shop_pay_pwd:'',
                shop_type_id:'',
                shop_email:'',
                shop_pwd:'',
            },
        }
    }
    onChange = (files, type, index) => {
        console.log(files);
        this.setState({
            files,
        });
    };
    inputChange(e,val){
        let data = Object.assign(this.state.shop,{[val]:e.target.value})
        this.setState({
            shop:data
        })
    }
    // getInputValue(){
    //     // alert(this.state.username)
    //     console.log(this.state.shop_name);
    // }
    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
          multiple: index === 1,
        });
    }
    gotoLogin = () => {
        console.log(this.state.shop)
        const fileList = this.state.files
        let formData = new FormData()
        console.log(fileList[0])
        formData.append('shop_img',fileList[0].file)
        formData.append('shop_name',this.state.shop.shop_name)
        formData.append('shop_phone',this.state.shop.shop_phone)
        formData.append('shop_address',this.state.shop.shop_address)
        formData.append('shop_email',this.state.shop.shop_email)
        formData.append('shop_pwd',this.state.shop.shop_pwd)
        formData.append('shop_pay_pwd',this.state.shop.shop_pay_pwd)
        formData.append('shop_type_id',this.state.shop.shop_type_id)

        axios({
            url:'api/olife/login/ShopRegister',
            method:'post',
            data:formData,
            
        }).then(data =>{
            console.log(data);
        })
        alert('注册成功')
        this.props.history.push('/Login')
    }

    render() {
        const { files } = this.state;
        return (
            /* html */
            <div style={{ padding: '15px 0' }}>
                <WingBlank>
                    <h2>请注册</h2>
                    <ImagePicker
                        files={files}
                        onChange={this.onChange}
                        onImageClick={(index, fs) => console.log(index, fs)}
                        selectable={files.length < 1}
                        multiple={this.state.multiple}
                    />
                    <div className='myinput'>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_name')} placeholder='商店名字'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_type_id')} placeholder='商店类型'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_address')} placeholder='商店地址'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_phone')} placeholder='绑定手机号'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_email')} placeholder='请输入QQ邮箱'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_pwd')} placeholder='请输入密码'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_pwd')} placeholder='请再一次输入密码'/>
                        <input type="text" onChange={(e)=>this.inputChange(e,'shop_pay_pwd')} placeholder='支付密码'/>
                        <Button type="primary" onClick={()=>this.getInputValue} size="small" inline onClick={this.gotoLogin}>注册</Button>
                    </div>
                </WingBlank>
            </div>
        )
    }
}

export default Registered